<template>
<view class="container">
	<block v-if="isload">
		<dd-tab :itemdata="tabdata" :itemst="tabitems" :st="st" :isfixed="false" @changetab="changetab" v-if="userlevel && userlevel.can_agent>=1"></dd-tab>
		
		<view class="topsearch flex-y-center">
			<view class="f1 flex-y-center">
				<image class="img" src="/static/img/search_ico.png"></image>
				<input :value="keyword" placeholder="输入昵称/姓名/手机号搜索" placeholder-style="font-size:24rpx;color:#C2C2C2" @confirm="searchConfirm" @input="searchChange"></input>
			</view>
		</view>
		<view class="content">
			<view class="topsearch flex-y-center sx" v-if="userlevel && userlevel.team_month_data==1">
				<text class="t1">日期筛选：</text>
				<view class="body_data" style="min-width: 200rpx;" @click="toCheckDate"> {{startDate?startDate:'点击选择日期'}}{{endDate?' 至 '+endDate:''}}
					<!-- <img class="body_detail" :src="pre_url+'/static/img/week/week_detail.png'" /> -->
				</view>
				<view class="t_date">
					<view v-if="startDate" class="x1" @tap="clearDate">清除</view>
				</view>
			</view>
			<view class="topsearch flex-y-center sx" v-if="team_auth==1 && userlevel && userlevel.team_month_data==1">
				<text class="t1">身份筛选：</text>
				<view class="t2" @tap="chooseLevel">
					<input type="text" placeholder="请选择级别" name="checkLevelid" :value="checkLevelname" placeholder-style="font-size:28rpx;color: #686868;font-family: PingFang SC;" disabled="true">
				</view>
			</view>
			<view class="topsearch flex-y-center sx" v-if="userinfo.month_yeji_show">
				<text class="t1">月份筛选：</text>
				<view class="t2">
					<picker @change="chooseMonth" :value="index" :range="month_item">
						<view class="uni-input" v-if="month_item[monthindex]">{{month_item[monthindex]}}</view>
						<view style="font-size:28rpx;color: #686868" v-else>请选择月份</view>
					</picker>
				</view>
			</view>
		<!-- <view class="topsearch flex-y-center" v-if="userlevel && userlevel.team_month_data==1">
			<text class="t1">日期筛选：</text>
			<view class="example-body" style="width: 500rpx;">
				<uni-datetime-picker
					v-model="range"
					type="daterange"
					start=""
					end=""
					rangeSeparator="至"
				/>
			</view>
		</view> -->
		
			
			<view class="yejilabel">
				<text class="t1" v-if="userlevel">{{t('团队')}}业绩：{{userinfo.team_yeji_total}}</text>
				<text class="t1" v-if="userlevel && userinfo.miniyeji_show">小市场业绩：{{userinfo.team_miniyeji_total}}</text>
				<text class="t1" style="width:100%" v-if="userinfo && userinfo.next_ordermoney_show">距升级团队业绩：{{userinfo.next_up_ordermoney}}</text>
				<text class="t1" v-if="userlevel && userinfo.month_yeji_show">{{month_text}}：{{userinfo.now_month_yeji}}</text>
			</view>
		</view>

		<view class="content" v-if="datalist && datalist.length>0">
			<view class="label">
				<text class="t1">成员信息</text>
				<text class="t2">来自TA的{{t('佣金')}}</text>
			</view>
			
			<block v-for="(item, index) in datalist" :key="index">
				<view class="item">
					<view class="f1" @click="toteam(item.id)">
						<image :src="item.headimg"></image>
						<view class="t2">
							<text class="x1">{{item.nickname}}(ID:{{item.id}})</text>
							<block v-if="custom && custom.team_show_visittime">
								<text class="x2">加入时间：{{item.createtime}}</text>
								<text class="x2">最后访问：{{item.last_visittime}}</text>
							</block>
							<text v-else class="x2">{{item.createtime}}</text>
							<text class="x2">等级：{{item.levelname}}</text>
							<text class="x2" v-if="item.tel">手机号：{{item.tel}}</text>
							<text class="x2" v-if="item.pid">推荐人ID：{{item.pid}}</text>
								<block v-if="custom && custom.yx_gift_pack" >
								<text class="x3">礼包订单：{{item.packcount}}</text>
								<text class="x3" >订单金额：￥{{item.totalpackmoney}}</text>
							</block>
							<text class="x2" v-if="item.xianxia_sales">出券量：{{item.xianxia_sales}}组</text>
						</view>
					</view>
					<view class="f2">
						<text class="t4" v-if="userlevel && userlevel.team_yeji==1">{{t('团队')}}业绩：{{item.teamyeji}}</text>
						<text class="t4" v-if="userlevel && userlevel.team_self_yeji==1">个人业绩：{{item.selfyeji}}</text>
						<text class="t4" v-if="userlevel && userlevel.team_down_total==1">{{t('一级')}}人数：{{item.team_down_total}} 人</text>
						<text class="t4" v-if="userlevel && userlevel.team_score==1">{{t('积分')}}：{{item.score}}</text>
						<text class="t1">+{{item.commission}}</text>
						<!-- <text class='t2'>{{item.downcount}}个成员</text> -->
						<view class="t3">
							<view v-if="userlevel && userlevel.team_givemoney==1" class="x1" @tap="givemoneyshow" :data-id="item.id">转{{t('余额')}}</view>
							<view v-if="userlevel && userlevel.team_givescore==1" class="x1" @tap="givescoreshow" :data-id="item.id" >转{{t('积分')}}</view>
							<view v-if="userlevel && userlevel.team_levelup==1" class="x1"   @tap="showDialog" :data-id="item.id" :data-levelid="item.levelid" :data-levelsort="item.levelsort">升级</view>
              <view v-if="userlevel && userlevel.team_shortvideo==1" class="x1" @tap="goto" :data-url="'/pagesA/shortvideo/looklog?mid=' + item.id">短视频记录</view>
              <view v-if="userlevel && userlevel.team_callphone==1 && item.tel" class="x1" @tap.stop="callphone" :data-phone="item.tel">拨打电话</view>
              <view v-if="custom && custom.team_member_history" class="x1" @tap.stop="goto" :data-url="'/pagesExt/my/history?mid='+item.id">查看足迹</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-popup id="dialogmoneyInput" ref="dialogmoneyInput" type="dialog">
			<uni-popup-dialog mode="input" title="转账金额" value="" placeholder="请输入转账金额" @confirm="givemoney"></uni-popup-dialog>
		</uni-popup>
		<uni-popup id="dialogscoreInput" ref="dialogscoreInput" type="dialog">
			<uni-popup-dialog mode="input" title="转账数量" value="" placeholder="请输入转账数量" @confirm="givescore"></uni-popup-dialog>
		</uni-popup>
		
		<view v-if="dialogShow" class="popup__container">
			<view class="popup__overlay" @tap.stop="showDialog"></view>
			<view class="popup__modal">
				<view class="popup__title">
					<text class="popup__title-text">升级</text>
					<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx" @tap.stop="showDialog"/>
				</view>
				<view class="popup__content">
					<view class="sheet-item" v-for="(item, index) in levelList" :key="index">
						<text class="item-text flex-item">{{item.name}}</text>
						<view class="flex1"></view><view @tap="changeLevel" :data-id="item.id" :data-name="item.name" v-if="item.id != tempLevelid && item.sort > tempLevelsort" :style="{'color':t('color1')}">选择</view><view v-else style="color: #ccc;">选择</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="levelDialogShow" class="popup__container">
			<view class="popup__overlay" @tap.stop="hideTimeDialog"></view>
			<view class="popup__modal">
				<view class="popup__title">
					<text class="popup__title-text">请选择级别</text>
					<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx" @tap.stop="hideTimeDialog"/>
				</view>
				<view class="popup__content">
					<view class="pstime-item" @tap="levelRadioChange" data-id="0" data-name="全部">
						<view class="flex1">全部</view>
						<view class="radio" :style="''"><image class="radio-img" src="/static/img/checkd.png"/></view>
					</view>
					<view class="pstime-item" v-for="(item, index) in allLevel" :key="index" @tap="levelRadioChange" :data-id="item.id" :data-name="item.name">
						<view class="flex1">{{item.name}}</view>
						<view class="radio" :style="''"><image class="radio-img" src="/static/img/checkd.png"/></view>
					</view>
				</view>
			</view>
		</view>
	</block>
	<nodata v-if="nodata"></nodata>
	<nomore v-if="nomore"></nomore>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
		opt:{},
		loading:false,
		isload: false,
		menuindex:-1,

		st: 1,
		datalist: [],
		pagenum: 1,
		userlevel:{},
		userinfo:{},
		textset:{},
		levelList:{},
		keyword:'',
		tomid:'',
		tomoney:0,
		toscore:0,
		nodata: false,
		nomore: false,
		dialogShow: false,
		tempMid: '',
		tempLevelid: '',
		tempLevelsort: '',
		mid:0,
		range: [],
		tabdata:[],
		tabitems:[],
		startDate: '',
		endDate: '',
		pre_url: app.globalData.pre_url,
		team_auth:0,
		checkLevelid: 0,
		checkLevelname: '',
		levelDialogShow: false,
		allLevel:{},
		month_item:[],
		monthindex:-1,
		month_text:'当月团队总业绩',
		month_value:'',
		custom:{}
    };
  },

  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.mid = this.opt.mid;
		this.getdata();
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  onReachBottom: function () {
    if (!this.nodata && !this.nomore) {
      this.pagenum = this.pagenum + 1
      this.getdata(true);
    }
  },
  onShow(){
  	var that  = this;
  	uni.$on('selectedDate',function(data){
			that.startDate = data.startStr.dateStr;
			that.endDate = data.endStr.dateStr;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			that.getdata();
		})
  },
  methods: {
    getdata: function (loadmore) {
			if(!loadmore){
				this.pagenum = 1;
				this.datalist = [];
			}
      var that = this;
      var st = that.st;
      var pagenum = that.pagenum;
      var keyword = that.keyword;
			that.loading = true;
			that.nodata = false;
      that.nomore = false;
			var mid = that.mid;
			var date_start = that.startDate;
			var date_end = that.endDate;
			var checkLevelid = that.checkLevelid;
			var month_search = that.month_value;	
      app.post('ApiAgent/team', {st: st,pagenum: pagenum,keyword:keyword,mid:mid,date_start:date_start,date_end:date_end,checkLevelid:checkLevelid,month_search:month_search}, function (res) {
				that.loading = false;
        var data = res.datalist;
        if (pagenum == 1) {
					that.userinfo = res.userinfo;
					that.userlevel = res.userlevel;
					that.textset = app.globalData.textset;
					that.datalist = data;
					that.levelList = res.levelList;
					that.month_item = res.month_item;
					if(res.userlevel && res.userlevel.can_agent==2){
						that.tabdata = [that.t('一级')+'('+res.userinfo.myteamCount1+')',that.t('二级')+'('+res.userinfo.myteamCount2+')'];
						that.tabitems = ['1','2'];
					}else if(res.userlevel && res.userlevel.can_agent==3){
						that.tabdata = [that.t('一级')+'('+res.userinfo.myteamCount1+')',that.t('二级')+'('+res.userinfo.myteamCount2+')',that.t('三级')+'('+res.userinfo.myteamCount3+')'];
						that.tabitems = ['1','2','3'];
					}else{
						that.tabdata = [that.t('一级')+'('+res.userinfo.myteamCount1+')'];
						that.tabitems = ['1'];
					}
					if(res.team_auth){
						that.tabdata = that.tabdata.concat([that.t('团队')+'('+res.userinfo.myteamCount4+')'])
						that.tabitems = that.tabitems.concat(['4']);
					}
					that.team_auth = res.team_auth;
					that.allLevel = res.all_level;
				
					//自定义集合
					that.custom = res.custom;
					
					if (data.length == 0) {
						that.nodata = true;
					}
					uni.setNavigationBarTitle({
						title: that.t('我的团队')
					});

					that.loaded();
        }else{
          if (data.length == 0) {
            that.nomore = true;
          } else {
            var datalist = that.datalist;
            var newdata = datalist.concat(data);
            that.datalist = newdata;
          }
        }
      });
    },
    changetab: function (st) {
			this.st = st;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      this.getdata();
    },
		givemoneyshow:function(e){
			var that = this;
			var id = e.currentTarget.dataset.id;
			that.tomid = id;
			that.$refs.dialogmoneyInput.open();
		},
		givescoreshow:function(e){
			var that = this;
			var id = e.currentTarget.dataset.id;
			that.tomid = id;
			that.$refs.dialogscoreInput.open();
		},
		givemoney:function(done, money){
			var that = this;
			var id = that.tomid;
			app.showLoading('提交中');
			app.post('ApiAgent/givemoney', {id:id,money:money}, function (res) {
				app.showLoading(false);
				if (res.status == 0) {
          app.error(res.msg);
        } else {
          app.success(res.msg);
					that.getdata();
					that.$refs.dialogmoneyInput.close();
				}
			})
		},
		givescore:function(done, score){
			var that = this;
			var id = that.tomid;
			app.showLoading('提交中');
			app.post('ApiAgent/givescore', {id:id,score:score}, function (res) {
				app.showLoading(false);
				if (res.status == 0) {
          app.error(res.msg);
        } else {
          app.success(res.msg);
					that.getdata();
					that.$refs.dialogscoreInput.close();
				}
			})
		},
    searchChange: function (e) {
      this.keyword = e.detail.value;
    },
    searchConfirm: function (e) {
      var that = this;
      var keyword = e.detail.value;
      that.keyword = keyword;
      that.getdata();
    },
		showDialog:function(e){
			let that = this;
			that.tempMid = e.currentTarget.dataset.id;
			that.tempLevelid = e.currentTarget.dataset.levelid;
			that.tempLevelsort = e.currentTarget.dataset.levelsort;
			this.dialogShow = !this.dialogShow
		},
		changeLevel: function (e) {
			var that = this;
			var mid = that.tempMid;
			var levelId = e.currentTarget.dataset.id;
			var levelName = e.currentTarget.dataset.name;
			app.confirm('确定要升级为'+levelName+'吗?', function () {
				app.showLoading('提交中');
			  app.post('ApiAgent/levelUp', {mid: mid,levelId:levelId}, function (res) {
					app.showLoading(false);
					if (res.status == 0) {
					  app.error(res.msg);
					} else {
						app.success(res.msg);
						that.dialogShow = false;
						that.getdata();
					}
			  });
			});
		},
		toteam:function(mid){
			if(this.team_auth){
				uni.navigateTo({
					url:'/activity/commission/myteam?mid='+mid
				})
			}
			return;

		},
		toCheckDate(){
			app.goto('../../pagesExt/checkdate/checkDate?ys=2&type=1&t_mode=5');
		},
		 clearDate(){
		  	var that  = this;
			that.startDate = '';
			that.endDate = '';
		  	uni.pageScrollTo({
		  	  scrollTop: 0,
		  	  duration: 0
		  	});
		  	this.getdata();
		  },
      callphone:function(e) {
      	var phone = e.currentTarget.dataset.phone;
      	uni.makePhoneCall({
      		phoneNumber: phone,
      		fail: function () {
      		}
      	});
      },
	  chooseLevel: function (e) {
		  
		  this.levelDialogShow = true;
		},
		hideTimeDialog: function () {
		  this.levelDialogShow = false;
		},
		levelRadioChange: function (e) {
		  var that = this;
		  that.checkLevelname = e.currentTarget.dataset.name;
		  that.checkLevelid = e.currentTarget.dataset.id;
		  that.levelDialogShow = false;
		  that.getdata();
		},
		chooseMonth:function(e){
			this.monthindex  = e.detail.value;
			this.month_value = this.month_item[this.monthindex]
			this.month_text =this.month_value +'团队总业绩';
			this.getdata();
		}
	}
};
</script>
<style>

.topsearch{width:94%;margin:16rpx 3%;}
.topsearch .f1{height:60rpx;border-radius:30rpx;border:0;background-color:#fff;flex:1}
.topsearch .f1 .img{width:24rpx;height:24rpx;margin-left:10px}
.topsearch .f1 input{height:100%;flex:1;padding:0 20rpx;font-size:28rpx;color:#333;}

.content{width:94%;margin:0 3%;border-radius:16rpx;background: #fff;margin-top: 20rpx;}
.content .label{display:flex;width: 100%;padding: 16rpx;color: #333;}
.content .label .t1{flex:1}
.content .label .t2{ width:300rpx;text-align:right}

.content .item{width: 100%;padding:32rpx 20rpx;border-top: 1px #eaeaea solid;min-height: 112rpx;display:flex;align-items:center;}
.content .item image{width: 90rpx;height: 90rpx;border-radius:4px}
.content .item .f1{display:flex;flex:1;align-items:center;}
.content .item .f1 .t2{display:flex;flex-direction:column;padding-left:20rpx}
.content .item .f1 .t2 .x1{color: #333;font-size:26rpx;}
.content .item .f1 .t2 .x2{color: #999;font-size:24rpx;}
.content .item .f1 .t2 .x3{font-size:24rpx;}

.content .item .f2{display:flex;flex-direction:column;width:200rpx;border-left:1px solid #eee;text-align: right;}
.content .item .f2 .t1{ font-size: 40rpx;color: #666;height: 40rpx;line-height: 40rpx;}
.content .item .f2 .t2{ font-size: 28rpx;color: #999;height: 50rpx;line-height: 50rpx;}
.content .item .f2 .t3{ display:flex;justify-content:flex-end;margin-top:10rpx; flex-wrap: wrap;}
.content .item .f2 .t3 .x1{padding:8rpx;border:1px solid #ccc;border-radius:6rpx;font-size:22rpx;color:#666;margin-top: 10rpx;margin-left: 6rpx;}
.content .item .f2 .t4{ display:flex;margin-top:10rpx;margin-left: 10rpx;color: #666; flex-wrap: wrap;font-size:18rpx;}
.sheet-item {display: flex;align-items: center;padding:20rpx 30rpx;}
.sheet-item .item-img {width: 44rpx;height: 44rpx;}
.sheet-item .item-text {display: block;color: #333;height: 100%;padding: 20rpx;font-size: 32rpx;position: relative; width: 90%;}
.sheet-item .item-text:after {position: absolute;content: '';height: 1rpx;width: 100%;bottom: 0;left: 0;border-bottom: 1rpx solid #eee;}
.man-btn {
	line-height: 100rpx;
	text-align: center;
	background: #FFFFFF;
	font-size: 30rpx;
	color: #FF4015;
}
	
	.body_data {
		font-size: 28rpx;
		font-weight: normal;
		font-family: PingFang SC;
		font-weight: 500;
		color: #686868;
		display: flex;
		align-items: center;
		float: right;
		/* border: 1rpx solid #cac5c5;
		padding: 2px;
		margin-left: 5px; */
	}
	.body_detail {
		height: 35rpx;
		width: 35rpx;
		margin-left: 10rpx;
	}
	.t_date .x1{height:40rpx;line-height:40rpx;padding:0 8rpx;border:1px solid #ccc;border-radius:6rpx;font-size:22rpx;color:#666;margin-left: 10rpx;}
	.pstime-item{display:flex;border-bottom: 1px solid #f5f5f5;padding:20rpx 30rpx;}
	.pstime-item .radio{flex-shrink:0;width: 32rpx;height: 32rpx;background: #FFFFFF;border: 2rpx solid #BFBFBF;border-radius: 50%;margin-right:30rpx}
	.pstime-item .radio .radio-img{width:100%;height:100%}
	.content .yejilabel{display:flex;width: 100%;padding: 16rpx;color: #333;justify-content: space-between;flex-wrap: wrap;line-height:60rpx;border-top:1rpx solid #f5f5f5}
	.content .yejilabel .t1{flex-shrink: 0;width: 50%;}
	.content .sx{padding:20rpx 16rpx; margin:0}
</style>